<template>
  <div class="goods-list">
      <ul class="gods-info">
          <li v-for="item in goods" :key="item.id" @click="goInfo(item.id)">
              <div class="photo">
                  <img :src="item.img_url" alt="">
                  <h4>{{item.title}}</h4>
              </div>
              <div>
                  <p class="prices">
                      <span>&yen;{{item.sell_price}}</span>
                      <span><del>&yen;{{item.market_price}}</del></span>
                  </p>
                  <p class="info">
                      <span>热卖中</span>
                      <span>剩余{{item.stock_quantity}}件</span>
                  </p>
              </div>
          </li>
      </ul>

      <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
      
  </div>
</template>
<script>
export default {
  data(){
      return{
          pageIndex:1,
          goods:[]

      }
  },
  created(){
      this.getGoods();

  },
  methods:{
      getGoods(){
          this.$http.get('api/getgoods?pageindex='+this.pageIndex).then(res=>{
              if(res.body.status==0){
                  this.goods=this.goods.concat(res.body.message);

              }else{
                  console.log('获取商品列表失败')
              }
          })
      },
      getMore(){
         this.pageIndex++;
          this.getGoods();
      },
      goInfo(id){
          this.$router.push({name:'goodsinfo',params:{id}})

      }
  }
}
</script>
<style lang="scss" scoped>
ul{
    padding:5px;
    margin-top:0px;
    margin-bottom: 0;
    display: flex;
    flex-wrap:wrap;
    li{
        margin-top: 5px;
        padding-top:5px;
        list-style: none;
        border:1px solid #ccc;
        box-shadow: 0 0 5px #ccc;
        flex-basis:49%;
        flex-flow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &:nth-child(2n+1){
            margin-right:2%; 
        }
        .photo{
            display: table-cell;
            vertical-align: middle;
            text-align:center;
            img{
            
            width:80%;
        }
        h4{
            font-size:13px;
            text-align: left;
        }

        }
        
        .prices{
            span{
                &:nth-child(1){
                    color:red;
                    margin-right:50px;

                }
            }
        }
        .info{
            display: flex;
            justify-content: space-between;
            font-size:12px;
        }
        div{
            padding:0 4px;
            &:nth-child(2){
                background-color: #eee;
              
            }
        }

    }
}
</style>

